// 首页
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
import home from "../../../styles/home.module.css";
import { doctorGet, newsGet } from "../../../request/xxApi";

function Home() {
  const childrenRoutes = useSelector((state) => state.route.childrenRoutes);
  // console.log("🚀 ~ Home ~ childrenRoutes:", childrenRoutes);
  //科室排队情况
  let [DepartmentQueue, setDepartmentQueue] = useState([]);
  let [newData, setnewData] = useState([]);
  useEffect(() => {
    doctorGet().then((res) => {
      setDepartmentQueue(res.data);
      // console.log(res.data);
    });
    newsGet().then((res) => {
      setnewData(res.data);
      // console.log(res.data);
    });
  }, []);
  // 医生数据
  const data1 = [
    {
      name: "常宝树",
      num: "DR-001",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
    {
      name: "常宝树",
      num: "DR-001",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
    {
      name: "常宝树",
      num: "DR-001",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
    {
      name: "常宝树",
      num: "DR-001",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
    {
      name: "常宝树",
      num: "DR-001",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
    {
      name: "常宝树",
      num: "DR-001",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
    {
      name: "常宝树",
      num: "DR-001",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
    {
      name: "常宝树",
      num: "DR-001",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
  ];
  //护士数据
  const data2 = [
    {
      name: "王艳萍",
      num: "DR-002",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
    {
      name: "王艳萍",
      num: "DR-002",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
    {
      name: "王艳萍",
      num: "DR-002",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
  ];
  //药房数据
  const data3 = [
    {
      name: "崔淑芬",
      num: "DR-003",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
    {
      name: "崔淑芬",
      num: "DR-003",
      img: "https://inews.gtimg.com/om_bt/Oafv2U4n5mbloCUBKhSTXeMsmMId1wa5kKMjcq_x1w6O4AA/641",
    },
  ];

  return (
    <div className={home.box_all}>
      <div className={home.box}>
        <div className={home.left}>
          {/* 医生数据 */}
          <div className={home.doctor}>
            {data1.map((item, index) => (
              //暂时用index，后面再改！！！！！！！！！！！
              <div className={home.doctor_info} key={index}>
                <div className={home.doctor_Box}>
                  <img
                    className={home.doctor_img}
                    src={item.img}
                    alt={item.name}
                  />
                  <div className={home.doctor_Box_right}>
                    <p className={home.doctor_name}>{item.name}</p>
                    <p className={home.doctor_num}>工号：{item.num}</p>
                  </div>
                </div>
                <div className={home.doctor_btn}>医生-今日值班</div>
              </div>
            ))}
          </div>
          {/* 护士数据 */}
          <div className={home.nurse}>
            {data2.map((item, index) => (
              //暂时用index，后面再改！！！！！！！！！！！
              <div className={home.doctor_info} key={index}>
                <div className={home.doctor_Box}>
                  <img
                    className={home.doctor_img}
                    src={item.img}
                    alt={item.name}
                  />
                  <div className={home.doctor_Box_right}>
                    <p className={home.doctor_name}>{item.name}</p>
                    <p className={home.doctor_num}>工号：{item.num}</p>
                  </div>
                </div>
                <div className={home.nurse_btn}>护士-今日当班</div>
              </div>
            ))}
          </div>
          {/* 药房数据 */}
          <div className={home.pharmacy}>
            {data2.map((item, index) => (
              //暂时用index，后面再改！！！！！！！！！！！
              <div className={home.doctor_info} key={index}>
                <div className={home.doctor_Box}>
                  <img
                    className={home.doctor_img}
                    src={item.img}
                    alt={item.name}
                  />
                  <div className={home.doctor_Box_right}>
                    <p className={home.doctor_name}>{item.name}</p>
                    <p className={home.doctor_num}>工号：{item.num}</p>
                  </div>
                </div>
                <div className={home.pharmacy_btn}>医生-今日值班</div>
              </div>
            ))}
          </div>
        </div>
        <div className={home.right}>
          {/* 当前科室排队情况 */}
          <div>
            <div> 当前科室排队情况</div>
            <div className={home.DepartmentQueue}>
              {DepartmentQueue.map((item) => (
                <div className={home.DepartmentQueue_info} key={item.name}>
                  <div className={home.DepartmentQueue_num}>{item.waitnum}</div>
                  <div className={home.DepartmentQueue_name}>{item.name}</div>
                </div>
              ))}
            </div>
            {/* 当班主任 */}
          </div>
          <div className={home.director}>
            <div> 当班主任</div>
            <div className={home.DepartmentQueue}>
              {DepartmentQueue.map((item) => (
                <div className={home.DepartmentQueue_info} key={item.name}>
                  <div className={home.director_name}>{item.maindoctor}</div>
                  <div className={home.DepartmentQueue_name}>DR-001</div>
                </div>
              ))}
            </div>
          </div>
          <div className={home.director}>
            <div> 医院公告</div>
            <div className={home.news_box}>
              {newData.map((item) => (
                <div className={home.news} key={item.title}>
                  <div className={home.news_title}>{item.title}</div>
                  <div className={home.news_date}>{item.date}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;
